<template>
	<view class="container">
		<view class="orderInfo">
			<view class="">订单号: 1234567899887</view>
			<view class="">下单时间: 2023-10-25 16:58:00</view>
			<view class="">支付金额: 12.5元</view>
		</view>
		<view class="payBtn" @click="pay">微信支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			pay() {
				const data = {
					out_trade_no: '', //订单编号
					description: '', //订单描述
					amount: '', //	商品信息类
					payer: ''
				}
				// 调用后台接口，获取生成商户订单参数
				xxxx(data).then(resp => {
					// 获取支付信息成功后，使用官方 API 调起微信支付
					uni.requestPayment({
						timeStamp: resp.data.timeStamp,
						nonceStr: resp.data.nonceStr,
						package: resp.data.package,
						paySign: resp.data.paySign,
						signType: 'MD5',
						success: (res) => {
							console.log('res-----: ', res)
						}
					})
				})
			},

		}
	}
</script>

<style lang="less">
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="less" scoped>
	.container {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.orderInfo {
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		box-shadow: 0px 2rpx 6rpx 0px rgba(0, 0, 0, 0.19);

		>view {
			line-height: 2;
			font-size: 30rpx;
		}
	}

	.payBtn {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 40rpx auto;
		background: #A7CCEF;
		border-radius: 40rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
	}
</style>